<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML学习</title>
</head>
<body>
     <!-- h1 是一个类 Class Struct 
     <h1 key1=value1 key2=value2>h1.1</h1> 是类的一个实例,  -->
    <h1 id="h1_01">h1.1</h1>
    <h1 id="h1_02">h1.2</h1>
    <h2 style="color: red;">h2</h2>
    <h3>h3</h3>
    <a href="https://www.baidu.com" target="_blank">百度</a>

    // /demo-form.php?FirstName=Mickey&LastName=Mouse&LastName=absfsdf
    <form action="demo-form.php">
        First name: <input type="text" name="FirstName" value="Mickey"><br>
        Last name: <input type="text" name="LastName" value="Mouse"><br>
        Password: <input type="password" name="LastName" value="Mouse"><br>
        <input type="submit" value="提交">
    </form>

    <!-- <iframe src="https://www.runoob.com/tags/tag-form.html" style="height: 400px; width: 100%;" frameborder="10"></iframe> -->


    <ul id="li_list">
        <li class="red">Coffee</li>
        <li class="red">Tea</li>
        <li class="red">Milk</li>
    </ul>
    <div>
      <span class="red">test </span>
    </div>

    <table border="10">
        // 来定义Table中的一行
        <tr>
            // th 来定义 一列 的 头
          <th>Month</th>
          <th>Savings</th>
        </tr>

        <tr>
           // td 来定义 一列数据
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </table>

      <div>
        这是一个Div
      </div>
      <div>
        这是一个Div
        <h1>这是嵌套的H1</h1>
      </div>
      <span>这个是一个span</span>
      <span>这个是一个span</span>

      <div style="width: 200px; height: 400px; background-color: rebeccapurple;">
        <div  style="width: 50px;height: 100px; margin: 10px 20px 30px 40px; border: solid 10px black; background-color:red">Test</div>
      </div>

      <div id="overflowTest">
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    </div>
</body>


// 通过本地文件引入
<script>
  var coffee = document.getElementById('coffee')
  coffee.innerText = 'Update by js'
</script>

<link rel="stylesheet" type="text/css" href="./mystyle.css">

定义元素的样式
// 选择元素 被选择的元素添加的样式
<!-- <style>
  ul>li:first-child {
    color:red;
    font-size: 20px;
   }
</style> -->

</html>